<template>
  <!--内容添加和编辑-->
  <el-dialog title='作者列表' v-model='editLoading' @close="handleClose" :close-on-click-modal="false" width='960px'  top='6vh'>
    <el-row :gutter='20'>
      <el-col :span='24'>
        <div class='navleft'>
          <div style='display:flex'>
            <el-input placeholder='请输入作者名称' v-model='queryParams.keyword' maxlength='20' size='mini'
                      style='width: 200px'>
              <i slot='prefix' class='el-input__icon el-icon-search'></i>
            </el-input>
            <el-button type='success' size='mini' @click='handleSearch' icon='search'>搜索</el-button>
          </div>
          <div class='grid-content mt10'>
            <el-table
                v-loading='tableLoading'
                :data='tableData'
                style='width: 100%;border:1px solid #eee;'>
              <el-table-column fixed prop="id" label="ID" width="50" align="center" />
              <el-table-column fixed label="用户头像" width="200" align="center">
                <template #default="scope">
                  <img :src="scope.row.avatar" style="width: 28px;height:28px;border-radius:50%;">
                </template>
              </el-table-column>
              <el-table-column fixed label="用户名称" prop="nickName"  align="center"/>
              <el-table-column label='操作' align="center">
                <template #default="scope">
                  <el-button
                      size='mini'
                      :type='selectAuthorId==scope.row.id ?"danger":"primary"'
                      v-re-click
                      :loading='scope.row.loading'
                      icon='plus'
                      @click='handleSelect(scope.$index, scope.row)'>{{ selectAuthorId==scope.row.id?"当前选择":"选择作者"}}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="kva-pagination-box center">
            <el-pagination :current-page="queryParams.pageNo" :page-size="queryParams.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" />
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup>
import {
  findPages,
} from '@/api/users/index.js'
// 搜索属性定义
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  teacherFlag:'',
  authorFlag:'',
  status:"",
  keyword: ""
})

// 定义响应式得列表数据容器
const tableData = ref([])
const tableLoading = ref(false)
const pages = ref(0)
const total = ref(0)
const searchForm = ref({})
const editLoading = ref(false)
const selectAuthorId = ref("")
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total * 1
  pages.value = resp.data.pages * 1
}
// 分页pageNo更改
const handleCurrentChange = (pno) => {
  queryParams.pageNo = pno
  handleLodeData()
}
// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLodeData()
}

const handleOpen = async (opid,params) => {
  editLoading.value = true
  selectAuthorId.value = opid
  if(params) {
    queryParams.authorFlag = params.authorFlag
    queryParams.teacherFlag = params.teacherFlag
  }
  handleLodeData()
}

const emits = defineEmits(["select"])
const handleSelect=(index, row)=>{
  emits('select',row)
  handleClose()
}

const handleClose=()=> {
  editLoading.value = false
}

// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
  handleOpen,
  handleClose
})
</script>
<style scoped>

.page .wrap {
  background: #fff;
  padding: 10px;
  overflow: auto;
}

.navleft {
  border: 1px solid #eee;
  background: #fafafa;
  padding: 20px;
}


</style>
